<html>
<head>
    <title>My first three.js app</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%
        }
    </style>
</head>
<body>
<script src="../repository/three.js-r102/build/three.js"></script>
<script src="../repository/three.js-r102/examples/js/controls/OrbitControls.js"></script>
<script src="../repository/three.js-r102/examples/js/loaders/OBJLoader.js"></script>
<script src="../repository/three.js-r102/examples/js/loaders/DDSLoader.js"></script>
<script src="../repository/three.js-r102/examples/js/loaders/MTLLoader.js"></script>
<script>
    let Obj = null;
    const scene = new THREE.Scene();

    const geometry = new THREE.BoxGeometry(100, 100, 100);
    const material = new THREE.MeshLambertMaterial({color: 0x0000ff});
    const mesh = new THREE.Mesh(geometry, material);

    mesh.translateY(200);

    // scene.add(mesh);

    const pointLight = new THREE.PointLight(0xffffff);
    pointLight.position.set(400, 200, 300);
    scene.add(pointLight);

    const ambientLight = new THREE.AmbientLight(0x444444);
    scene.add(pointLight);

    const width = window.innerWidth;
    const height = window.innerHeight;
    const k = width / height;
    const s = 150;

    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200);
    camera.lookAt(scene.position);


    // // instantiate a loader
    // const loader = new THREE.OBJLoader();
    // // load a resource
    // loader.load(
    // // resource URL
    // '../model/oilcan.obj',
    // // called when resource is loaded
    // function ( object ) { scene.add( object ); },
    // // called when loading is in progresses
    // function ( xhr ) { console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' ); },
    // // called when loading has errors
    // function ( error ) { console.log( 'An error happened' ); } );

    const mtlLoader = new THREE.MTLLoader();
    //mtl材质加载器
    mtlLoader.load('../model/oilcan2.mtl', mtl);

    //加载.mtl文件，执行mtl函数
    function mtl(material) {
        const objLoader = new THREE.OBJLoader();
        //obj模型加载器
        objLoader.setMaterials(material);
        //mtl材质赋值给obj模型
        objLoader.load('../model/oilcan2.obj', obj);
        //加载.obj文件，执行obj函数
    }

    function obj(object3D) {
        // object3D.scale.set(100, 100, 100);
        //放大object3D对象
        get3dObj(object3D);
        scene.add(object3D);
        //object3D对象插入场景对象
    }

    function get3dObj(obj) {
        console.log(obj)
        Obj = obj;
    }

    console.log(Obj)


    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.setClearColor(0xb9d3ff, 1);


    document.body.append(renderer.domElement);

    function render() {
        // mesh.rotateX(0.01);
        // mesh.rotateY(0.01);
        if (Obj) {
            Obj.rotateY(0.01);
            // Obj.rotateX(0.01);
        }
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }

    render();

    const controls = new THREE.OrbitControls(camera);
    // controls.addEventListener("change",render);

</script>
</body>
</html>